<template>
  <div class='member-menu first-box'>
    <header class="head pr">
      <img class="pa head-bac" :src="imgs.bac1" alt="">
      <img :src="imgs.setting" class="pa setting zindex10" @click="$router.push('/settings')" alt="">
      <img class="pr zindex10" :src="userInfo.img" alt="">
      <p class="pr zindex10"><span class="username">{{userInfo.name}}</span> <span><img class="vip-type" :src="imgs.vipType" alt="">{{userInfo.type}}</span></p>
      <p class="btn pa"><span @click="fullmoney">立即充值</span><span @click="getCharge">立即提现</span></p>
    </header>
    <ul class="money">
      <li>
        <p>{{userInfo.integral||0}}</p>
        <p>积分（分）</p>
      </li>
      <li>
        <p>{{userInfo.money||0}}</p>
        <p>金额（元）</p>
      </li>
      <li>
        <p>{{userInfo.charge||0}}</p>
        <p>佣金（元）</p>
      </li>
    </ul>
    <GreyLine class="margintop10"></GreyLine>
    <SecondMenu class="margin15" :listData="menuData" ></SecondMenu>
  </div>
</template>
<script>
import GreyLine from '../common/line.vue'
import SecondMenu from '../common/secondMenu.vue'
export default {
  components: {GreyLine,SecondMenu},
  name: "",
  data() {
    return {
      imgs:{
        bac1:require('../../assets/img/vip/bac1.png'),
        setting:require('../../assets/img/vip/set.png'),
        vipType:require('../../assets/img/vip/vip1.png'),
        bac0:require("../../assets/img/car.jpg"),
      },
      menuData:[
        {
          label:"会员中心",
          img:require('../../assets/img/vip/1.png'),
          url:"/member/center",
        },{
          label:"我的卡券",
          img:require('../../assets/img/vip/2.png'),
          url:"/member/voucher",
        },{
          label:"我的订单",
          img:require('../../assets/img/vip/3.png'),
          url:"/member/myorder",
        },{
          label:"我的套餐",
          img:require('../../assets/img/vip/4.png'),
          url:"/member/meals",
        },{
          label:"我的顾问",
          img:require('../../assets/img/vip/5.png'),
          url:"/advisers",
        },{
          label:"我的消息",
          img:require('../../assets/img/vip/6.png'),
          url:"/member/infomation",
        },{
          label:"意见反馈",
          img:require('../../assets/img/vip/7.png'),
          url:"/member/feedback",
        },{
          label:"问卷调查",
          img:require('../../assets/img/vip/8.png'),
          url:"/member/investigation",
        },{
          label:"其他",
          img:require('../../assets/img/vip/9.png'),
          url:"/member/groom",
        }
      ],
      userInfo:{
        img:"",
        name:"大豆豆",
        type:"黄金会员",
        integral:0,//积分
        money:0,//金额
        charge:0,//佣金
      }
    };
  },
  methods: {
    getCharge(){
      console.log("click--立即提现--发请求获取用户提现信息")

      this.$store.state.dialogs.charge.show=true
    },
    fullmoney(){
      this.$router.push("/fullmoney")
    },
    getList(){
      var params={
        // userId:sessionStorage.getItem("userId")
      }
      _g.apiPost("vipPage/init.do",params).then(res=>{
        // console.log(res.error_msg)
        if(res.error_msg){
          this.$store.state.dialogs.content=res.error_msg
          this.$store.state.dialogs.show=true
          return
        }
        this.userInfo.name=res.data.user.nickname||res.data.user.realName
        this.userInfo.img=res.data.user.headPic||"http://t1.hxzdhn.com/uploads/tu/201710/9999/rn15497d3b8b.jpg"

        this.userInfo.type=res.data.vo?res.data.vo.name:""
        this.userInfo.money=res.data.vo?res.data.vo.money:res.data.user.money
        this.userInfo.integral=res.data.vo?res.data.vo.integral:res.data.user.integral
        this.userInfo.charge=res.data.vo?res.data.vo.charge:res.data.user.brokerage
      })
    }
  },
  created() {
    this.getList()
  }
};
</script>
<style lang="scss" scoped>
.member-menu {
  font-size: 12px;
  color: #fff;

  .head{
    min-height: 200px;
    height: 38%;
    box-sizing: border-box;
    padding-top: 6%;

    .head-bac{
      width: 100%;
      height: 100%;
      border-radius: 0;
      top: 0;
      border: none;
      z-index: 0;
    }
    >img{
      width: 70px;
      height: 70px;
      border-radius: 50%;
      margin: 0 auto;
      border: 1px solid #fff;
      box-sizing: border-box;
    }

    .setting{
      right: 10px;
      top: 10px;
      border: none;
      width: 35px;
      height: 35px;
      padding: 5px;
    }
    .setting:active{
      opacity: .6;
    }

    p{
      margin: 0 20%;
      margin-top: 10px;
      text-align: center;

      .username{
        font-size: 16px;
        margin-right: 5px;
      }
      .username + span{
        background-color: #fff;
        color: #FC9522;
        line-height: 24px;
        border-radius: 12px;
        padding: 1px 5px;
      }
      .vip-type{
        width: 13px;
        display: inline-block;transform: translateY(2px)
      }
    }
    .btn{
      color: #fff;
      bottom: 18px;
      margin: 0;
      width: 50%;
      left: 50%;
      transform: translateX(-50%);
      text-align: center;
      display: flex;
      justify-content: space-between;

      span{
        display: inline-block;
        width: 45%;
        // max-width: 80px;
        line-height: 25px;
        background: linear-gradient(left bottom,#FF6613,#FFA200);
        background: -webkit-gradient(linear, left bottom, right top, from(#FF6613), to(#FFA200));
        border-radius: 13px;
      }
      span:active{
        opacity: .6;
      }
    }
  }
  .money{
    margin: 0 15px;
    display: flex;

    li{
      width: 0;
      flex-grow: 1;
      border-left: 1px solid #F2F2F2;

      p{
        text-align: center;
        color: #666;
      }
      p:nth-child(1){
        font-size: 18px;
        color: #FC9522;
        position: relative;
        top: -5px;
      }
    }
    li:nth-child(1){
      border: none;
    }
  }
  .margintop10{
    margin-top: 10px;
  }

  .margin15{
    margin: 10px 20px;
  }

}
.zindex10{
  z-index: 10;
}
</style>